<script setup lang="ts">
import * as echarts from 'echarts/core';
import { TooltipComponent, TooltipComponentOption } from 'echarts/components';
import { GaugeChart, GaugeSeriesOption } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([TooltipComponent, GaugeChart, CanvasRenderer]);

type EChartsOption = echarts.ComposeOption<
  TooltipComponentOption | GaugeSeriesOption
>;

const chart = ref();
var option: EChartsOption;
let myChart: echarts.ECharts | null = null;

onMounted(() => {
  myChart = echarts.init(chart.value);
  console.log("myChart", myChart);
  setOption(0) // 初始化图标示例
})

// const gradient = ref({ // 自定义渐变色
//         type: 'linear',
//         x: 1,
//         y: 1,
//         x2: 0,
//         y2: 1,
//         colorStops: [
//           {
//             offset: 0, color: '#ee2e32' // 0% 处的颜色
//           },
//           {
//             offset: 0.25, color: '#d2874a' // 25% 处的颜色
//           },
//           {
//             offset: 0.75, color: '#a2bf65' // 75% 处的颜色
//           },
//           {
//             offset: 1, color: '#87d068' // 100% 处的颜色
//           }
//         ],
//         global: false // 缺省为 false
//       })

const setOption = (value: number) => {
  option = {
  tooltip: {
    formatter: '{a} <br/>{b} : {c}%'
  },
  series: [
    {
      name: '内存占用率',
      type: 'gauge',
      center: ['50%', '65%'],
      radius: '100%',
      legendHoverLink: true,
      startAngle: 210,
      endAngle: -30,
      axisLine: {
        show: true,
        roundCap: true,
        lineStyle: {
          width: 15,
        }
      },
      progress: {
        show: true,
        overlap: false,
        width: 20,
        roundCap: true,
        clip: true,
        // itemStyle: {
        //   color: gradient.value,
        // }
      },
      splitLine: {
        show: true,
        length: 25,
        distance: 15,
        lineStyle: {
          color: 'auto',
          width: 3,
          type: 'solid',
          cap: 'round'
        }
      },
      axisTick: {
        show: true,
        splitNumber: 10,
        length: 12,
        distance: 10,
        lineStyle: {
          color: 'auto',
          width: 2,
          type: 'solid',
          cap: 'round'
        }
      },
      pointer: {
        show: true,
        showAbove: true,
        length: '50%',
        itemStyle: {
          color: '#87d068'
        }
      },
      anchor: {
        show: true,
        showAbove: true,
        size: 15,
        offsetCenter: [0, '16%'],
        itemStyle: {
          color: '#1677FF',
          borderColor: '#eee',
          borderWidth: 8,
          borderType: 'solid',
        }
      },
      detail: {
        valueAnimation: true,
        formatter: '{value}',
      },
      data: [
        {
          value: value,
        }
      ]
    }
  ]
};

option && myChart?.setOption(option);
}

// 在组件销毁时，也销毁 ECharts 实例以释放资源
onBeforeUnmount(() => {
  if (myChart) {
    myChart.dispose();
  }
});

defineExpose({
  setOption
})

</script>
<template>
  <div ref="chart" style="width: auto; height: 300px; padding: 0%;" autore></div>
</template>